<template>
	<view>
		<view class="mask" v-if="verifyShowing">
			<view class="dialog">
				<view class="title">验证码</view>
				<view class="content">
					<input style="text-align: center;" type="number" maxlength="6" v-model="verifyCode" class="underline" placeholder="请输入验证码"/>
				</view>
				<view class="buttons">
					<button class="scale" size="mini" type="primary" @click="confirmUnbind">确定</button>
					<button class="scale" size="mini" type="default" @click="cancelUnbind">取消</button>
				</view>
			</view>
		</view>
		
		<view class="panel" style="height: 350rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
			<open-data class="avatar" type="userAvatarUrl"></open-data>
			<open-data class="nickName" type="userNickName"></open-data>
			<view style="display: flex;justify-content: center;align-items: center;">
				{{phone}}
			</view>
		</view>		
		<view style="text-align: center;height: 700rpx;justify-content: center;" class="vertical" v-if="cards.length==0">
			<image src="../../static/icons/empty.png" mode="widthFix" style="margin-top: 350rpx;width:120rpx"></image>
			<view class="gst">您还没有绑定任何房号</view>
		</view>
		
		<block v-else>
			<navigator class="litem horizontal" v-for="(card, idx) in cards" :key="card.roomId" @longtap="showOptions(idx)">
				<view class="vertical" style="border-right: solid 1px lightgray;width:150rpx">
					<image style="width: 80rpx;height: 80rpx;" src="../../static/icons/card.png" mode="widthFix"></image>
					<view>房号{{idx+1}}</view>
				</view>
				<view style="display:flex;flex-direction: column;align-items: flex-start;flex-grow: 1;flex-shrink: 1;padding-left: 50rpx;">
					<view class="courtName">{{card.courtName}}</view>
					<view class="gst">{{card.roomName}}</view>
					<!-- <view class="gst">{{card.cardNo}}</view> -->
<!-- 					<button type="primary" size="mini" @click="unbind(idx)" style="margin: 0;">解绑</button> -->
				</view>
				<view class="vertical">
					<view class="gst" v-if="card.isDefault">默认房号</view>
					<switch color="#2E62E2" :checked="card.isDefault" @change="changeDefault($event, card.roomId)"></switch>
				</view>
			</navigator>
		</block>
		
		<view style="margin: 50px;"></view>
		
		<view class="bottom horizontal">
			<button style="color: white;background-color: var(--color-ok);" class="capsule scale" @tap="gotoBind">绑定新房号</button>
		</view>
	</view>
</template>

<script>
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	const app = getApp()

	export default {
		components: {
			cmdAvatar, uniList, uniListItem,
		},
		onShow() {
			this.getBindeds()
		},
		data() {
			return {
				verifyShowing:false,
				verifyCode:'',
				idx: '',
				phone: '',
				cards:[
					
				]
			}
		},
		onLoad(opts) {
			uni.showLoading({
				title:'加载中...'
			})
		},
		methods: {
			unbind(idx){
				this.idx = idx
				this.verifyShowing = true
			},
			confirmUnbind(){
				if(this.verifyCode==123456){
					this.cards.splice(this.idx, 1)
					this.verifyShowing=false
					uni.showToast({
						title: '解绑成功！'
					});
				}else{
					uni.showToast({
						title: '验证码不正确！',
						icon:'none'
						
					});
				}
			},
			cancelUnbind(){
				this.verifyShowing = false
			},
			showOptions(idx){
				const card = this.cards[idx]
				this.idx = idx
				uni.showActionSheet({
					itemList: ['解绑', ],
					success: res => {
						if(res.tapIndex==0){
							uni.showModal({
								title: '解绑提醒',
								content: `是否确认解绑房号${card.courtName}${card.roomName}？`,
								cancelText: '取消',
								confirmText: '解绑',
								success: res => {
									if(res.confirm){
										this.unbindCard(card, idx)
									}
								},
							});
						}
					},
				});
			},
			getBindeds(){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url+'userInfo',
					method: 'GET',
					dataType:'json',
					data: {},
					success: res => {
						this.loaded=true
						uni.hideLoading()
						const {data} = res
						console.log(data)
						this.phone = data.data.phone
						this.cards=[]
						this.cards.push(...data.data.waterCardList)
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			changeDefault(evt, roomId){
				console.log(evt)
				for (const card of this.cards) {
					if(card.roomId!=roomId){
						card.isDefault = false
					}else{
						card.isDefault = true
					}
				}
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url + 'updateDefaultWaterCard',
					method: 'POST',
					data: {
						roomId,
						isDefault: evt.detail.value?1:0,
					},
					success: res => {
						const {data} = res
						console.log(data)
						if(data.code==200){
							uni.showToast({
								icon:'success',
								title:'切换房号成功!'
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			gotoBind() {
				uni.navigateTo({
					url: '../bindCard/bindCard',
				})
			},
			
			// 解绑房号
			unbindCard(room, idx){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url + 'unBindWaterCard',
					method: 'POST',
					data: {
						roomId: room.roomId,
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							this.cards.splice(idx, 1)
							uni.showToast({
								title: '解绑成功！',
								duration:5000,
							});
						}else{
							console.error(err)
							uni.showToast({
								title: err.message,
								icon:'none'
							});
						}
					},
					fail: (err) => {
						console.warn(err.errMsg)
						uni.showToast({
							title: err.errMsg,
							icon:'none'
						});
					},
				});
			},

			getPhone(evt) {
				const code = uni.getStorageSync('code')
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url + 'bindPhone',
					method: 'POST',
					data: {
						code,
						encryptedData: evt.detail.encryptedData,
						iv: evt.detail.iv,
					},
					success: res => {
						const {data} = res
						console.log(data)
						if(res.code==200){
							// 保存手机号
							uni.setStorageSync('phone', data.data)
							this.phone = app.globalData.phone = data.data
						}else if(data.code==500){
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},

			userLogined(evt) {
				console.log(evt)
				if (evt.detail.userInfo) {
					this.logined = true
					this.userInfo = evt.detail.userInfo
					app.globalData.logined=true
					app.globalData.userInfo=this.userInfo
					uni.setStorageSync('logined', true)
					uni.setStorageSync('userInfo', this.userInfo)
				}
			}
		}
	}
</script>

<style scoped>
	.mask{
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		
		left: 0;
		top:0;
		width: 750rpx;
		height: 100vh;
		
		z-index: 999998;
		
		background-attachment: fixed;
	}
	
	.dialog{
		position: absolute;
		display: flex;
		flex-direction: column;
		
		align-items: stretch;
		
		z-index: 999999;
		
		background-color: white;
		
		border-radius: 20rpx;
		
		box-shadow: 5px 5px gray;
		
		left: 50%;
		top: 50%;
		
		transform: translate(-50%, -50%);
		
		min-width: 600rpx;
		min-height: 200rpx;
	}
	
	.dialog .title{
		text-align: center;
		font-weight: bold;
		
		padding: 10rpx 0;
		
		border-bottom: solid 1px gray;
	}
	
	.dialog .content{
		padding: 20rpx;
	}
	
	.dialog .buttons{
		display: flex;
		flex-wrap: nowrap;
		
		border-radius: 0;
	}
	
	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	
	.courtName{
		font-weight: bold;
	}

	.avatar {
		width: 128rpx;
		height: 128rpx;
		overflow: hidden;
		display: inline-block;
		border-radius: 50% 50%;
		border: solid 2px gray;
		box-shadow: 1px gray;
	}
	
	.underline{
		border: none;
		border-bottom: solid 1px gray;
	}
</style>
